<template>
  <el-dialog title="查看" :close-on-click-modal="false" :visible.sync="visible" class="view" center>
    <div>
      <div class="listLi">
        <div class="leftContent">专栏标题:</div>
        <div class="right">
          <p>{{dataForm.bookName}}</p>
        </div>
      </div>
      <div class="listLi">
        <div class="leftContent">专栏作者:</div>
        <div class="right">
          <p>{{dataForm.author}}</p>
        </div>
      </div>
      <div class="listLi">
        <div class="leftContent">作者简介:</div>
        <div class="right">
          <p>{{dataForm.speaker}}</p>
        </div>
      </div>
      <div class="listLi">
        <div class="leftContent">推荐文案:</div>
        <div class="right">
          <p>{{dataForm.briefIntroduction}}</p>
        </div>
      </div>
      <div class="listLi">
        <div class="leftContent">封面图:</div>
        <div class="right">
          <p><img style="width:200px;height:auto" :src="dataForm.coverUrl" alt=""></p>
        </div>
      </div>
      <div class="listLi">
        <div class="leftContent">嘉宾简介:</div>
        <div class="right">
          <p>{{dataForm.bookDesc}}</p>
        </div>
      </div>
      <div class="listLi">
        <div class="leftContent">专栏导读:</div>
        <div class="right">
          <div v-html="dataForm.chapterDesc"></div>
        </div>
      </div>
      <div class="listLi">
        <div class="leftContent">视频时长:</div>
        <div class="right">
          <p>{{dataForm.video_duration}}</p>
        </div>
      </div>
      <div class="listLi" v-if="dataForm.sourceInfo&&dataForm.sourceInfo.video_url">
        <div class="leftContent">视频:</div>
        <div style="width: 400px;" class="right">
          <video
            :src="dataForm.sourceInfo.video_url"
            controls="controls"
            id="myvideo"
            style="width:200px;height:auto"
          ></video>
        </div>
      </div>
      <div class="listLi" v-if="dataForm.sourceInfo&&dataForm.sourceInfo.cover_url">
        <div class="leftContent">视频封面:</div>
        <div class="right">
          <p>
            <img :src="dataForm.sourceInfo.cover_url" style="width:200px;height:auto">
          </p>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="returns()" style="text-align:center">返回</el-button>
    </span>
  </el-dialog>
</template>
<style lang="scss">
  .listLi {
    display: flex;
    margin: 20px 0;
    .right{
      flex: 1;
    }
  }
  .leftContent {
    width: 140px;
    text-align: right;
    margin-right: 25px;
  }
  .listLi p {
    margin: 0 0 5px 0;
  }
  .contentImg img{
    width: 100% !important;
  }
</style>

<script>
  import ueditor from "ueditor";
  export default {
    data() {
      return {
        dataForm: {},
        showAudio: false,
        showVideo: false,
        visible: false,
        ue: null,
        cueId: `J_ueditorBox_${new Date().getTime()}`,
        ueContent: "",
        hasVideo: ""
      };
    },
    methods: {
      returns() {
        this.visible = false;
        var myAuto = document.getElementById("myaudio");
        if (myAuto) {
          myAuto.pause();
          myAuto.load();
        }
      },
      init(data) {
        this.visible = true;
        this.$nextTick(() => {
          this.dataForm = {...data}
          this.dataForm.sourceInfo = JSON.parse(this.dataForm.sourceInfo);
          if (this.dataForm.sourceInfo && this.dataForm.sourceInfo.video_duration) {
            const duration = this.dataForm.sourceInfo.video_duration / 1000
            const hour = parseInt(duration / 3600) < 10 ? '0' + parseInt(duration / 3600) : parseInt(duration / 3600)
            const minute = parseInt(duration % 3600 / 60) < 10 ? '0' + parseInt(duration % 3600 / 60) : parseInt(duration % 3600 / 60)
            const second = parseInt(duration % 60) < 10 ? '0' + parseInt(duration % 60) : parseInt(duration % 60)
            this.dataForm.video_duration = `${hour}:${minute}:${second}`
          }
        });
      }
    }
  };
</script>
<style scoped>
  .audioSpan {
    display: block;
  }
</style>
